import { DeleteOutlined, EditOutlined, PlusOutlined, RollbackOutlined, SwapOutlined } from '@ant-design/icons';
import { Button, Drawer, List, Modal } from 'antd';
import 'antd/dist/antd.css';
import React from 'react';
import { Link } from 'react-router-dom';
import Home from '../common/home';
import http from '../common/http';
import TypeItemForm from './type-item-form';
import TypeTransferForm from './type-transfer-form';

const { confirm } = Modal

class TypeListForm extends React.Component {
    state = {
        loading: false,
        data: [
            { id: 2, name: "test", noteNumber: 12 }
        ]
    }

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        this.fetch()
    }

    fetch = () => {
        this.setState({ loading: true })
        http.get("/api/note/type/statistics")
            .then(res => {
                let data = res.data
                this.setState({
                    loading: false,
                    data: data
                })
            })
    }

    onClose = (refresh) => {
        this.setState({
            visible: false,
        })
        if (refresh)
            this.fetch()
    }
    onCloseTransfer = (refresh) => {
        this.setState({
            transferVisible: false,
        })
        if (refresh)
            this.fetch()
    }

    showInfo(id, name) {
        let state = { visible: true, typeId: id, typeName: name }
        this.setState(state)
    }
    showTransfer(id, name) {
        let state = { transferVisible: true, typeId: id, typeName: name }
        this.setState(state)
    }

    delete(id, name) {
        confirm({
            title: `确认删除【${name}】?`,
            onOk: () => {
                console.info("删除", id, name)
                http.delete("/api/note/type/delete/" + id)
                    .then(res => {
                        console.log('res: ', res.data)
                        this.fetch()
                    })
            }
        })
    }

    render() {
        const butStyle = { marginRight: '10px' }
        return (
            <div>
                <Home />
                <Link to="/"><Button style={butStyle} type="primary"> <RollbackOutlined /> 返回 </Button></Link>
                <Button style={butStyle} onClick={() => { this.showInfo() }} type="primary"> <PlusOutlined /> 新建 </Button>
                <div style={{ marginTop: 10 }} />

                <List bordered
                    loading={this.state.loading}
                    dataSource={this.state.data}
                    locale={{ emptyText: '暂无数据' }}
                    renderItem={item => (
                        <List.Item>
                            <Link to={'/type-display/' + item.id}>
                                {item.name} <br />
                                笔记数：{item.noteNumber || 0}
                            </Link>
                            <div style={{
                                position: 'absolute',
                                right: 20,
                                width: '200',
                                padding: '10px 10px',
                                textAlign: 'right',
                            }}>
                                {
                                    item.noteNumber ?
                                        <Button style={butStyle} onClick={() => { this.showTransfer(item.id, item.name) }} type="dashed">
                                            <SwapOutlined /> 迁移笔记
                                        </Button>
                                        : null
                                }
                                <Button style={butStyle} onClick={() => { this.showInfo(item.id, item.name) }} type="primary">
                                    <EditOutlined /> 修改
                                </Button>
                                <Button style={butStyle} onClick={() => { this.delete(item.id, item.name) }} disabled={item.noteNumber} type="danger">
                                    <DeleteOutlined /> 删除
                                </Button>
                            </div>
                        </List.Item>
                    )} />

                <Drawer title="类型信息" width={500}
                    onClose={this.onClose} visible={this.state.visible}>
                    <TypeItemForm key={this.state.typeId} onClose={this.onClose} typeId={this.state.typeId} typeName={this.state.typeName} />
                </Drawer>
                <Drawer title="类型迁移" width={500}
                    onClose={this.onCloseTransfer} visible={this.state.transferVisible}>
                    <TypeTransferForm key={this.state.typeId} onClose={this.onCloseTransfer} typeId={this.state.typeId} typeName={this.state.typeName} />
                </Drawer>

            </div>
        )
    }
}

export default TypeListForm